<template>
  <dv-border-box1 style="background-size: cover;" :color="['#ffeca8', 'gold']" :class="isFullScreen?'fullscreen-div':''"
                  class="back" ref="borderRef">
    <div
        style="width: 100%;height: 100%;background-size: cover;display: flex;flex-direction: column;">

      <div
          style="font-size: 32px;color: gold;margin-top: 16px;text-align: center;display: flex;flex-direction: row;padding: 0px 32px">
        <div style="display: flex;flex-direction: column;flex: 1;align-items: center">
          <span style="justify-self: center;font-size: 44px">{{ userStore.race.name }}</span>
          <span
              style="justify-self: center">{{ this.selectSubject == null ? '' : this.selectSubject.name }}序号抽签</span>

          <dv-decoration-5  :color="['#ff793e', '#ff793e']" style="width:1400px;height:64px;margin-top: -20px"/>
          <img @click="playLive" style="width: 80px;position: absolute;left: 64px;top:16px;border-radius: 50%"
               src="../../../assets/images/云南省教指委.jpg">

          <img @click="playLive" style="width: 80px;position: absolute;right: 64px;top:16px;border-radius: 50%"
               src="../../../assets/images/鹤庆.jpg">
        </div>



        <!--        <audio loop style="display: none" ref="audioPlayer" :src="warning_play_audio" controls></audio>-->

        <!--        <audio style="display: none" ref="audioPlayer2" :src="onlotterySrc" controls></audio>-->


        <ExpandOutlined v-if="!isFullScreen" @click="fullScreen" style="font-size: 18px"/>

        <CompressOutlined v-else @click="exitFullScreen" style="font-size: 18px"/>
      </div>
      <div style="display: flex;flex-direction: column;width: 100%;flex: 1">
        <div style="display: flex;flex-direction: row;flex-grow: 1;padding: 16px;height: 0px">
          <a-card style="width: 320px" title="项目选择">
            <div style="height: 100%;display: flex;flex-direction: column;flex: 1;width: 100%;">
              <div class="head-container">
                <el-form-item label="组别" prop="schoolId">
                  <el-select @change="onchangeGroup" clearable v-model="queryParams.groupId" placeholder="请选择">
                    <el-option
                        v-for="item in groupList"
                        :key="item.id"
                        :label="item.gropuName"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="head-container">
                <el-tree
                    style="height: 480px;overflow-y: scroll"
                    :data="subjectOptions"
                    :props="{ label: 'label', children: 'children' }"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="deptTreeRef"
                    node-key="id"
                    highlight-current
                    default-expand-all
                    @node-click="handleNodeClick"
                />
              </div>
            </div>
          </a-card>
          <div style="display: flex;flex-direction: row;flex-wrap: wrap;flex: 1;align-items: start;justify-content: start;align-content: flex-start">
            <div style="flex-basis: 20%;height: 25%;padding: 8px;" v-for="(item,index) in getOrchestrateList()">
              <div
                  style="background: #ffffffdd;margin: 8px;height: 100%;width: 100%;border-radius: 24px;display: flex;align-items: center">
                <div style="margin: 8px;flex: 2">
                  <image-preview style="margin-left: 8px;border-radius: 50%" :src="item.avatarSrc" :width="120"
                                 :height="120"/>
                  <div style="font-size: 32px">
                    <span>{{ item.name }}</span>

                  </div>
                </div>
                <div style="flex: 1">
                  <a-spin size="large" v-if="!item.no"/>
                  <div
                      v-else
                      style="font-size: 32px;background: red;border-radius: 50%;width: 64px;height:64px;color: white;font-weight: bolder;display: flex;flex-direction: row;align-items: center;justify-content: center">
                    {{ item.no }}
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>

        <pagination
            style="background: transparent"
            v-show="total>0"
            :total="total"
            v-model:page="queryParams.pageNum"
            :limit="20"
            @pagination="getList"
        />
      </div>
      <dv-decoration-7 :color="['#ffeca8', 'gold']" style="width:auto;height:30px;align-self: center;"><span
          style="color: gold;margin: 0px 16px">昆明云体科技有限公司技术支持</span></dv-decoration-7>
    </div>
  </dv-border-box1>
</template>

<script>
import useUserStore from "@/store/modules/user.js";
import {list, update, lottery, outputExcel} from "@/api/business/orchestrate";
import {message} from "ant-design-vue";
import {listSchool} from "@/api/business/school.js";
import {deptTreeSelect} from "@/api/business/subject.js";
import {listGroup} from "@/api/business/group.js";

export default {
  name: "index",
  data() {
    const userStore = useUserStore()
    let queryParams = {
      subId: null,
      pageNum: 1,
      pageSize: 0,
      schoolId: null,
      no: null,
      avatarSrc: null,
      name: null,
      stuNo: null,
      className: null,
      nation: null,
      sex: null,
      birth: null,
      birthPlace: null,
      cardId: null,
      mailAddress: null,
      mobile: null,
      oneConfirm: null,
      oneConfirmTime: null,
      twoConfirm: null,
      twoConfirmTime: null,
      editShow: true,

      tableLoading: true,

    };
    return {
      url: window.location.host + ":8080",
      userId: userStore.id,
      isFullScreen: false,
      userStore,
      timeText: '2024-23',
      showInfo: null,
      page: 0,
      total: 0,
      queryParams,
      schoolList: [],
      subjectOptions: [],
      orchestrateList: []
    }
  },
  mounted() {
    this.getSchoolList();
    this.getGroupList();
    window.addEventListener('keydown', this.handleKeyDown);
    this.fullScreen();
    this.getDeptTree();
  },
  beforeUnmount() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    /** 节点单击事件 */
    handleNodeClick(data) {
      let that = this;
      this.selectSubject = data.baseSubject;
      this.queryParams.subId = data.baseSubject.id;
      this.queryParams.type = data.baseSubject.type;
      this.getList();
    },
    onchangeGroup(){
      this.getList();
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      let that = this;
      deptTreeSelect().then(response => {
        console.log(response)
        that.subjectOptions = response.data;
      });
    },
    fullScreen() {
      this.isFullScreen = true;
    },
    exitFullScreen() {
      this.isFullScreen = false;
    },
    /** 查询学校列表 */
    getSchoolList() {
      let that = this;
      listSchool(
          {pageSize: 0}
      ).then(response => {
        that.schoolList = response.rows;
      });
    },
    onchangeSchool() {
      this.getList();
    },
    getList() {
      let that = this;
      if (this.queryParams.subId == null) {
        return;
      }
      that.orchestrateList = [];
      that.tableLoading = true;
      list(this.queryParams).then(response => {
        console.log(response)
        that.orchestrateList = response.rows;
        that.total = response.total;
        that.tableLoading = false;
      }).catch(err => {
        that.orchestrateList = [];
        that.total = 0;
        that.tableLoading = false;
      });
    },

    handleKeyDown(event) {
      console.log(event.key)
      if (event.key === 'Space' || event.key === ' ') {
        console.log("start");
        this.startLottery();
      }
    },
    async startLottery() {
      let that = this;
      const key = 'updatable';
      message.loading('抽签中', key, 0);
      for (let i = 0; i < this.orchestrateList.length; i++) {
        if (i > (this.queryParams.pageNum) * 20) {
          this.queryParams.pageNum++;
        }
        await lottery(this.orchestrateList[i]).then(response => {
          console.log(response.data);
          that.orchestrateList[i] = response.data;
        })
      }
      message.success({content: '抽签完成!', key, duration: 2});
    },
    getOrchestrateList() {
      let list = this.orchestrateList.slice((this.queryParams.pageNum - 1) * 20, this.queryParams.pageNum * 20);
      console.log(list)

      return list;
    },
    getGroupList(){
      let that = this;
      listGroup(
          {pageSize: 0}
      ).then(response => {
        that.groupList = response.rows;
        that.groupList.push({
          gropuName:'全部组别',
          id:-1,
        })
      });
    },
  }
}
</script>

<style scoped>
.back {
  background-image: url('../../../assets/images/lotterybk.jpg')
}

.fullscreen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.border {
  background-image: url('../../../assets/images/border.png')
}

.loading {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.loading span {
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  -webkit-animation: load 1s ease infinite;
}

@-webkit-keyframes load {
  0%, 100% {
    height: 40px;
    background: lightgreen;
  }
  50% {
    height: 70px;
    margin: -15px 0;
    background: lightblue;
  }
}

.loading span:nth-child(2) {
  -webkit-animation-delay: 0.2s;
}

.loading span:nth-child(3) {
  -webkit-animation-delay: 0.4s;
}

.loading span:nth-child(4) {
  -webkit-animation-delay: 0.6s;
}

.loading span:nth-child(5) {
  -webkit-animation-delay: 0.8s;
}
</style>